src/app/(main)/admin/users/[userId]/UserSettings.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { Column, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { UserEditForm } from './UserEditForm';
import { UserWebsites } from './UserWebsites';

export function UserSettings({ userId }: { userId: string }) {
  const { formatMessage, labels } = useMessages();

  return (
    <Column gap="6">
      <Tabs>
        <TabList>
          <Tab id="details">{formatMessage(labels.details)}</Tab>
          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
        </TabList>
        <TabPanel id="details" style={{ width: 500 }}>
          <UserEditForm userId={userId} />
        </TabPanel>
        <TabPanel id="websites">
          <UserWebsites userId={userId} />
        </TabPanel>
      </Tabs>
    </Column>
  );
}